<template>
  <el-main class='pdf-content'>
    <h2 class='title'>{{ content.title }}</h2>
    <section class='pdf-content-body tl' v-if='content.show'>
      <div class='pdf-container'></div>
    </section>
    <section class='pdf-content-body tc' v-else>
      <el-icon>
        <data-analysis />
      </el-icon>
      <p class='tc'>暂无数据</p>
    </section>
  </el-main>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { DataAnalysis } from "@element-plus/icons";
import request from "@/request/index";
import * as pdfjsLib from "pdfjs-dist/build/pdf";
import PDFJSWorker from "pdfjs-dist/build/pdf.worker.entry";
import { Buffer } from "buffer";

pdfjsLib.GlobalWorkerOptions.workerSrc = PDFJSWorker;

export default defineComponent({
  name: "detail-pdf",
  props: {
    blog: Object,
  },
  components: {
    DataAnalysis,
  },
  setup (props) {
    // const { file } = props.blog;
    const content = reactive({
      data: null,
      show: true,
      title: "",
    });

    return {
      // file,
      content,
    };
  },
  methods: {
    loadPage (fileStream) {
      let container = document.querySelector(".pdf-container");

      let lastPromise;
      let loadingTask = pdfjsLib.getDocument(fileStream);
      loadingTask.promise.then((pdf) => {
        const pages = pdf.numPages;

        const loadOnePage = (pageNum) => {
          return pdf.getPage(pageNum).then(function (page) {
            let scale = window.devicePixelRatio || 1.2;
            const viewport = page.getViewport({ scale: scale });

            let canvas = document.createElement("canvas");
            let context = canvas.getContext("2d");
            canvas.width = canvas.style.width = viewport.width;
            canvas.height = canvas.style.height = viewport.height;
            canvas.style.display = "block";
            canvas.style.margin = "0 auto";
            container.append(canvas);

            let renderContext = {
              canvasContext: context,
              viewport: viewport,
            };

            let pagetask = page.render(renderContext);
            pagetask.promise.then(() => {
              if (++pageNum <= pages)              {
                loadOnePage(pageNum);
              }
            });
          });
        };

        lastPromise = loadOnePage(1);
      });
    },
  },
  mounted () {
    const { id, type } = this.blog;
    request.get(`/blog/detail/file/${id}`, { id, type: type }).then((resp) => {
      if (resp.data && resp.data.sfiles && resp.data.sfiles.length > 0)      {
        const file = resp.data.sfiles[0];
        this.content.show = true;
        this.content.title = resp.data.title;
        this.loadPage(Buffer.from(file.data, "binary"));
      } else      {
        this.content.show = false;
      }
    });
  },
});
</script>

<style lang="scss" scoped>
.pdf-content {
  padding: 15px 10px;
}
.pdf-content .title {
  height: 40px;
  text-align: left;
  line-height: 40px;
  color: #26a69a;
}
.pdf-content .pdf-content-body {
  min-height: 75vh;
  font-size: 14px;
}
.pdf-content-body.tc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ccc;
  text-align: center;
}
.pdf-content-body > .el-icon {
  font-size: 60px;
}
</style>
